<!DOCTYPE html>
<html style="100%">
<head>
    <!--    <meta name="viewport" content="width=device-width, initial-scale=1"/>-->
    <meta charset="utf-8">
    <title>ECharts</title>

    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <!-- 引入 自定义主题customed -->
<!--    <script src="walden.js"></script>-->
</head>
<body style="height:100%;width:100%">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:100%;height:230px;margin:0 auto;"></div>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
         myChart.showLoading({
                text : "加载中..."
            });
        // 指定图表的配置项和数据
        var option = {
         backgroundColor:'rgba(128, 128, 128, 0)', //rgba设置透明度0.1
        title: {
         text: '最近24小时数据变化',
         textStyle:{
         fontSize:15,
          color:'#333333'
        },
        left:'center',//标题居中
            },
    tooltip : {
        trigger: 'axis',
<!--        axisPointer : {            // 坐标轴指示器，坐标轴触发有效-->
<!--            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'-->
<!--        },-->
         formatter: "时间:{b}<br/>数值:{c}"
    },
    grid: {
        left: '3%',
        top:"17%",
        right: '3%',
        bottom: '3%',
        show: true,
        borderWidth:1,
        containLabel: true
    },

     xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
         axisTick: {
                alignWithLabel: true
            },
             axisLabel:{
                            rotate:-45,//倾斜角度
                            interval:3//间隔显示
                        }
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true,
        itemStyle : {
                                normal : {
                                    color:'green',
                                    lineStyle:{
                                        color:'#59D1AB'
                                    }
                                }
                 },
    }]
};
        // 使用刚指定的配置项和数据显示图表。
       // myChart.setOption(option);

        function initData(value,time){
            option.series[0].data=JSON.parse(value);
            option.xAxis.data=JSON.parse(time);
            myChart.setOption(option);
            myChart.hideLoading();
            //获取数据之后重新绘制布局
            myChart.resize();
        }
</script>
</body>
</html>